<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时光邮局 - 给未来的自己写一封信</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero {
            background: linear-gradient(135deg, rgba(101, 119, 227, 0.9) 0%, rgba(83, 172, 228, 0.9) 100%), url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center;
            background-size: cover;
        }
        .serif {
            font-family: 'Noto Serif SC', serif;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 3.5rem;
            line-height: 1;
            margin: 0.2em 0.1em 0 0;
            color: #6577e3;
            font-weight: 700;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-item {
            transition: all 0.3s ease;
        }
        .feature-item:hover {
            transform: translateY(-3px);
            color: #6577e3;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero min-h-screen flex items-center justify-center text-white px-4 py-20">
        <div class="max-w-4xl mx-auto text-center">
            <h1 class="serif text-5xl md:text-6xl font-bold mb-6 leading-tight">时光邮局</h1>
            <p class="text-2xl md:text-3xl font-light mb-8">给未来的自己写一封信</p>
            <p class="text-xl mb-12 opacity-90 max-w-3xl mx-auto">记录此刻的思绪，寄予未来的自己。让时间成为最美的邮差。</p>
            <a href="https://www.hi2future.com/" class="inline-block bg-white text-indigo-600 hover:bg-indigo-100 font-medium rounded-full px-8 py-4 transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
                立即写信 <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </section>

    <!-- Main Content -->
    <div class="max-w-6xl mx-auto px-6 py-20">
        <!-- Introduction -->
        <section class="mb-20">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="serif text-4xl font-bold mb-6 text-gray-800">时光定格，心意永存</h2>
                    <p class="drop-cap text-gray-700 text-lg mb-6">时光邮局是一个为用户提供给未来自己写信的平台，强调通过书写来传递情感和鼓励。时光邮局允许用户通过网络平台选择日期，撰写一份信件，然后在未来的指定日期自动递送这封信给自己。</p>
                    <p class="text-gray-700 text-lg mb-8">该平台的目的是鼓励人们记录当下的情感和想法，并在未来某个时间点回顾。服务的特色在于信件会在预定的时间点发送给用户，成为一种记录和反思自己的独特方式。</p>
                    <div class="flex items-center text-indigo-600">
                        <i class="fas fa-envelope-open-text text-2xl mr-3"></i>
                        <span class="font-medium">探索更多: <a href="https://www.hi2future.com/" class="underline hover:text-indigo-800">www.hi2future.com</a></span>
                    </div>
                </div>
                <div class="relative">
                    <div class="bg-white rounded-xl shadow-xl p-8 card-hover">
                        <div class="flex items-center mb-6">
                            <div class="bg-indigo-100 rounded-full p-4 mr-4">
                                <i class="fas fa-envelope text-indigo-600 text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-xl text-gray-800">一封时光信件</h3>
                                <p class="text-gray-500">寄往未来的自己</p>
                            </div>
                        </div>
                        <div class="border-t border-gray-200 pt-6">
                            <p class="text-gray-700 mb-4">亲爱的未来的我：</p>
                            <p class="text-gray-500 italic mb-6">此刻的我怀着怎样的心情写下这封信？未来的你会如何看待现在的决定？希望那时的你已经实现了我们的共同梦想...</p>
                            <div class="flex justify-between items-center text-sm text-gray-500">
                                <span>寄信日期：<span class="font-medium">2023-10-15</span></span>
                                <span>收信日期：<span class="font-medium">2025-10-15</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Features -->
        <section class="mb-20">
            <h2 class="serif text-4xl font-bold mb-12 text-center text-gray-800">时光邮局的独特价值</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                    <div class="text-indigo-600 text-3xl mb-4">
                        <i class="fas fa-book-open"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">情感记录</h3>
                    <p class="text-gray-600">通过书写信件给未来的自己，人们可以记录当前的感受和经历，留下时间的印记。每一封信都是生命长河中的一盏明灯。</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                    <div class="text-indigo-600 text-3xl mb-4">
                        <i class="fas fa-bullseye"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">目标规划</h3>
                    <p class="text-gray-600">这种方式帮助人们设定长远目标，通过将来回顾过去的自己，增强对未来的期待和规划，形成成长的良性循环。</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                    <div class="text-indigo-600 text-3xl mb-4">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">成长工具</h3>
                    <p class="text-gray-600">时光邮局提供了一个独特的时间管理工具，通过书写和回顾，辅助个人成长和反思，见证自我的蜕变历程。</p>
                </div>
            </div>
        </section>

        <!-- Visualization -->
        <section class="mb-20">
            <h2 class="serif text-4xl font-bold mb-12 text-center text-gray-800">时光邮局的价值链</h2>
            <div class="bg-white p-8 rounded-xl shadow-md">
                <div class="mermaid">
                    graph LR
                    A[当下书写] -->|记录情感| B[时间沉淀]
                    B -->|未来接收| C[自我反思]
                    C -->|促进| D[个人成长]
                    D -->|影响| A
                </div>
            </div>
        </section>

        <!-- CTA -->
        <section class="bg-gradient-to-r from-indigo-500 to-blue-600 rounded-xl p-12 text-center text-white">
            <h2 class="serif text-3xl md:text-4xl font-bold mb-6">准备给未来的自己写封信吗？</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">现在写下的每一个字，都是送给未来的珍贵礼物。</p>
            <a href="https://www.hi2future.com/" class="inline-block bg-white text-indigo-600 hover:bg-indigo-100 font-medium rounded-full px-8 py-4 transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
                开始写信 <i class="fas fa-pen-fancy ml-2"></i>
            </a>
        </section>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="max-w-6xl mx-auto px-6">
            <div class="text-center">
                <h3 class="text-2xl font-medium mb-2">技术小馆</h3>
                <p class="text-gray-400 hover:text-white transition duration-200">
                    <a href="http://www.yuque.com/jtostring">www.yuque.com/jtostring</a>
                </p>
                <div class="flex justify-center space-x-6 mt-6">
                    <a href="#" class="text-gray-400 hover:text-white transition duration-200">
                        <i class="fab fa-weixin text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition duration-200">
                        <i class="fab fa-weibo text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition duration-200">
                        <i class="fab fa-github text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>